<template>
  <div class="match-available-orders-table">
    <el-table
        v-loading="loading"
        :data="availableOrders"
        border
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column label="订单编号" min-width="120" prop="orderNumber"></el-table-column>
      <el-table-column label="供应商" min-width="150" prop="supplierName"></el-table-column>
      <el-table-column label="金额" min-width="100" prop="totalAmount">
        <template #default="scope">
          {{ formatCurrency(scope.row.totalAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="采购日期" min-width="120" prop="purchaseDate"></el-table-column>
      <el-table-column label="状态" min-width="100" prop="status">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="170" prop="createTime"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleMatch(scope.row)">匹配</el-button>
          <el-button size="small" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {defineEmits, defineProps, ref} from 'vue';
import {ElMessage} from 'element-plus';
import {MatchQueryParams, MatchService} from '@/api/match-service';

const props = defineProps({
  searchParams: {
    type: Object as () => MatchQueryParams,
    default: () => ({})
  }
});

const emit = defineEmits(['view', 'match', 'selection-change']);

// 数据列表
const availableOrders = ref<any[]>([]);
const total = ref(0);
const loading = ref(false);
const selectedRows = ref<any[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);

// 获取可匹配的订单列表
const getAvailableOrders = async () => {
  loading.value = true;
  try {
    const params: MatchQueryParams = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      ...props.searchParams
    };

    const res = await MatchService.getAvailableOrders(params);
    if (res.code === 200) {
      availableOrders.value = res.data.records;
      total.value = res.data.total;
    } else {
      ElMessage.error(res.message || '获取可匹配订单失败');
    }
  } catch (error) {
    console.error('获取可匹配订单失败', error);
    ElMessage.error('获取可匹配订单失败');
  } finally {
    loading.value = false;
  }
};

// 格式化货币
const formatCurrency = (value: number | undefined) => {
  if (!value && value !== 0) return '0.00';
  return Number(value).toFixed(2);
};

// 获取状态类型
const getStatusType = (status: string) => {
  switch (status) {
    case '待收货':
      return 'warning';
    case '已收货':
      return 'success';
    case '已开票':
      return 'primary';
    default:
      return 'info';
  }
};

// 选择行
const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection;
  emit('selection-change', selection);
};

// 查看详情
const handleView = (row: any) => {
  emit('view', row);
};

// 处理匹配操作
const handleMatch = (row: any) => {
  emit('match', row);
};

// 分页操作
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getAvailableOrders();
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  getAvailableOrders();
};

// 暴露方法给父组件
defineExpose({
  getAvailableOrders,
  selectedRows,
  refreshData: getAvailableOrders
});
</script>

<style scoped>
.match-available-orders-table {
  margin-top: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 